<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="nav-bar all">
			<view class="nav-bar-left">
				<u-icon name="arrow-leftward" size="23" label="歌单" labelSize="16" @click="BackHome">
				</u-icon>
			</view>
			<view class="nav-bar-right">
				<u-icon name="search" size="28"></u-icon>
			</view>
		</view>

		<!-- 歌单信息 -->
		<view class="content all">
			<view class="contents-image">
				<u--image :src="herd.picUrl" width="230rpx" height="230rpx" radius="15rpx" @click="click">
				</u--image>
			</view>
			<view class="content-title">
				<text class="content-title-txt">我喜欢的音乐</text>
				<view class="content-title-info">
					<u--image :src="user.avatarUrl" width="45rpx" height="45rpx" radius="50%">
					</u--image>
					<text style="padding-left: 12rpx;" @click="send">
						{{user.nickname}} >
					</text>
				</view>
			</view>
		</view>

		<!-- 小功能 -->
		<view class="play_icon">
			<view class="play_icon-left">
				<u-icon name="play-circle-fill" color="#fd393b" size="24px"></u-icon>
				<text class="play_icon-left-tit">播放全部（{{ids.length}})</text>
			</view>
			<view class="play_icon-right">
				<text>全选</text>
			</view>
		</view>
		<!-- 歌曲列表 -->
		<view class="songs-list" v-for="(item,index) in songs" :key="item.id">
			<view class="songs-list-message" @tap="playMusic(item.id,index)">
				<view class="songs-list-message-index">
					{{index + 1}}
				</view>
				<view class="songs-list-message-title">
					<text>{{item.name}}</text>
					<text style="color: #ccc;font-size: 20rpx;">
						{{item.ar[0].name }}-{{item.al.name}}
					</text>
				</view>
			</view>
			<view class="play_list-icons">
				<img src="@/static/songs/mvs.png" v-if="item.mv!==0" width="28px" @tap="playmv"></img>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		_getLikeMusic,
		_getSongsList
	} from '@/http/mine.js'
	export default {
		data() {
			return {
				ids: [], //我喜欢的音乐id
				songs: [], //歌曲数据
				herd: "", //头像
				user: uni.getStorageSync('UserData').profile, //获取歌单用户头像
				currentpage: 1, //当前页数
				PageCount: 30, //每页条数
			}
		},
		onLoad() {
			this.Likesongs()
		},
		onReachBottom() {
			this.Likesongs()
		},
		methods: {
			send(){
				console.log('123');
			},
			
			//先请求所有我喜欢音乐的id，然后请求网站的歌曲信息
			async Likesongs() {
				const {
					ids: res
				} = await _getLikeMusic();
				this.ids = res

				let id = this.ids.slice((this.currentpage - 1) * this.PageCount, this.currentpage * this.PageCount)
				const songs = await _getSongsList(id);
				this.songs = [...this.songs, ...songs.songs]
				this.herd = songs.songs[0].al
				this.currentpage++
			},

			// 点击播放
			playMusic(id, index) {
				this.$store.dispatch("playIndex", index);
				this.$store.dispatch("playMusic", {
					list: this.songs,
					index: index,
					listid: id
				})
				uni.navigateTo({
					url: '/pages/Playmusic/Playmusic?id=' + id
				})
			},
			// 回到首页
			BackHome() {
				uni.switchTab({
					url: './index'
				})
			},

		}

	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 25rpx 30rpx;
	}

	.page {
		background-color: #f4f0f1;
		font-family: STXihei;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
	}

	.content {
		display: flex;

		&-title {
			padding: 10rpx 30rpx;

			&-txt {
				font-size: 35rpx;
				font-weight: bold;
			}

			&-info {
				display: flex;
				align-items: center;
				text-align: center;
				padding-top: 80rpx;
				font-size: 20rpx;
				color: #ccc;
			}
		}
	}

	// 图标
	.play_icon {
		display: flex;
		justify-content: space-between;
		// padding-top: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		&-left {
			display: flex;

			&-tit {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				font-weight: bold;
				font-size: 31rpx;
			}
		}

		&-right {
			display: flex;
			align-items: center;
			color: #a6a6a6;
			font-size: 24rpx;
		}
	}

	.songs-list {
		margin: 18px 15px;
		display: flex;
		justify-content: space-between;

		&-message {
			display: flex;

			&-index {
				width: 9px;
				padding-left: 4px;
				padding-right: 23px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #828282;
			}

			&-title {
				width: 240px;
				display: flex;
				flex-direction: column;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				text {
					font-size: 33rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
</style>
